<template>
  <div>
    <div class="title">采购申请单</div>
    <!--基本信息-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-form ref="proForm" :model="apply" :rules="rules" class="demo-table-expand" inline label-position="left"
               label-width="120px">
        <el-form-item label="单据编码">
          <el-input disabled placeholder="保存后自动生成"></el-input>
        </el-form-item>
        <el-form-item label="单据主题" prop="subject">
          <el-input v-model="apply.subject"></el-input>
        </el-form-item>

        <el-form-item label="业源单据类型">
          <el-select v-model="apply.source" placeholder="请选择">
            <el-option v-for="item in sources" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="业源单据">
          <el-input v-model="apply.sourceName"></el-input>
        </el-form-item>

        <el-form-item label="采购类别">
          <el-select v-model="apply.source" placeholder="请选择">
            <el-option v-for="item in sources" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否需要询价">
          <el-radio v-model="apply.status" :label="1">否</el-radio>
          <el-radio v-model="apply.status" :label="2">是</el-radio>
        </el-form-item>

        <el-form-item label="制单日期">
          <el-date-picker v-model="apply.makedate" format="yyyy-MM-dd" placeholder="选择日期" type="date"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="制单人">
          <el-input v-model="apply.makeuser"></el-input>
        </el-form-item>
        <el-form-item label="备注" style="width: 100%;height: 100%;">
          <el-input v-model="apply.note" :cols="150" :rows="6" type="textarea"></el-input>
        </el-form-item>

      </el-form>
    </el-card>

    <!--银行信息-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div style="margin: 10px;">
          <span style="margin-right: 20px;">采购申请明细</span>
          <el-button v-if="id===''" size="mini" type="primary" @click="addRow">增行</el-button>
          <el-button v-if="id===''" size="mini" type="primary" @click="delRow">删行</el-button>
        </div>
        <el-table :data="apply.detail" border stripe style="width: 100%" @selection-change="chg">
          <el-table-column align="center" header-align="center" label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column align="center" header-align="center" type="selection" width="80">
          </el-table-column>
          <el-table-column header-align="center" label="产品名称" prop="productName" width="180">
            <template v-slot="scope">
              <el-input v-model="scope.row.productName" placeholder="请选择产品" size="mini"
                        @focus="chooseproduct(scope.row.id)"></el-input>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="产品编号" prop="productCode" width="180">
          </el-table-column>
          <el-table-column header-align="center" label="规模型号" prop="model" width="180">
          </el-table-column>
          <el-table-column header-align="center" label="单位" prop="unit" width="100">
          </el-table-column>
          <el-table-column header-align="center" label="建议供应商" width="180">
            <template v-slot="scope">
              <el-input v-model="scope.row.providerName" placeholder="请选择供应商" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="数量" width="120">
            <template v-slot="scope">
              <el-input-number v-model="scope.row.num" size="mini"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="单价" width="120">
            <template v-slot="scope">
              <el-input-number v-model="scope.row.price" size="mini"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="总金额" width="120">
            <template v-slot="scope">
              <el-input-number v-model="scope.row.total" size="mini"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="需用日期" width="120">
            <template v-slot="scope">
              <el-input v-model="scope.row.needdate" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="备注">
            <template v-slot="scope">
              <el-input v-model="scope.row.note" size="mini"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </el-card>
    <div class="btn">
      <el-button v-if="id===''" type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="back">返回</el-button>
    </div>

    <!--选择商品-->
    <ChooseProduct :visible.sync="ishowproduct" @selected="sel"></ChooseProduct>
  </div>
</template>

<script>

const ChooseProduct = () => import('../components/ChooseProduct.vue')
export default {

  data() {
    return {
      ishowproduct: false,
      apply: {
        subject: "",
        source: 1,
        sourceId: "",
        sourceName: "",
        status: 1,
        makeuser: "",
        makedate: "",
        note: "",
        detail: [{
          id: 1,
          productName: "",
          productCode: "",
          model: "",
          unit: "",
          providerId: "",
          providerName: "",
          num: 0,
          price: 0,
          total: 0,
          needdate: "",
          note: ""
        }]
      },
      id: "",
      chooseProductId: "",//点击选择商品的那一行数据的标识
      idcounter: 1,// 记录数据的标志
      sels: [],
      sources: [{
        value: 1,
        label: "无来源"
      },
        {
          value: 2,
          label: "销售合同"
        }, {
          value: 3,
          label: "生产订单"
        }
      ],

      rules: {
        subject: [{
          required: true,
          message: '请输入单据主题',
          trigger: 'blur'
        }]
      }
    }
  },
  components: {
    ChooseProduct
  },
  created() {
    let id = this.$route.query.id;
    if (id) {
      //查看数据
      this.id = id;
      this.queryDetail(id);
    } else {
      this.idcounter = 1;
      this.id = "";
      //添加数据
      this.apply = {
        subject: "",
        source: 1,
        sourceId: "",
        sourceName: "",
        status: 1,
        makeuser: "",
        makedate: "",
        note: "",
        detail: [{
          id: 1,
          productName: "",
          productCode: "",
          model: "",
          unit: "",
          providerId: "",
          providerName: "",
          num: 0,
          price: 0,
          total: 0,
          needdate: "",
          note: ""
        }]
      };
    }

    this.init();
  },
  methods: {

    sel($event) {
      let product = $event;
      //定义一个数组 记录点击事件之前数据
      let hisdata = [];
      //遍历申请明细
      let details = this.apply.detail;
      for (let i = 0; i < details.length; i++) {
        let tmp = details[i];
        if (tmp.id === this.chooseProductId) {
          break;
        } else {
          hisdata.push(tmp);
        }
      }

      //遍历选择的商品
      product.forEach(p => {
        this.idcounter = this.idcounter + 1;
        hisdata.push({
          id: this.idcounter,
          productName: p.name,
          productCode: p.code,
          model: p.model,
          unit: p.unit,
          providerId: "",
          providerName: "",
          num: 0,
          price: 0,
          total: 0,
          needdate: "",
          note: ""
        });
      })

      this.apply.detail = hisdata;

    },
    chooseproduct(id) {
      this.ishowproduct = true;
      this.chooseProductId = id;
    },
    queryDetail(id) {
      this.$api.getApply({id})
        .then(res => {
          if (res.code === 200) {
            this.apply = res.data;
          }
        })
    },
    //新增一行
    addRow() {
      this.idcounter = this.idcounter + 1;
      this.apply.detail.push({
        id: this.idcounter,
        productName: "",
        productCode: "",
        model: "",
        unit: "",
        providerId: "",
        providerName: "",
        num: 0,
        price: 0,
        total: 0,
        needdate: "",
        note: ""
      });
    },
    //删除行
    delRow() {
      if (this.sels.length === 0) {
        this.$message({
          message: '请选择要删除的行！',
          type: 'warning'
        });
        return;
      }

      //定义变量存储要删除的id
      let ids = [];
      //遍历要删除的id
      this.sels.forEach(detail => {
        ids.push(detail.id);
      })

      //存储未删除的数据
      let tmp = [];
      //遍历当前所有明细
      this.apply.detail.forEach(detail => {
        let i = ids.indexOf(detail.id);
        if (i === -1) {
          //说明当前数据不删除
          tmp.push(detail);
        }
      })

      this.apply.detail = tmp;//更新数据

    },

    //复选框选中改变事件
    chg(selection) {
      this.sels = selection;
    },

    init() {
      let now = new Date();
      let m = now.getMonth() + 1;
      this.apply.makedate = now.getFullYear() + "-" + m + "-" + now.getDate();
      let user = this.$session.getUser();
      this.apply.makeuser = user.name;
    },

    back() {
      this.$router.push({
        name: "apply"
      })
    },
    save() {

      this.$refs.proForm.validate(valid => {
        if (!valid)
          return;
        this.$api.saveApply(this.apply)
          .then(res => {
            if (res.code === 200) {
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.back()
            }
          })
      });

    }
  }
}
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
  height: 60px;
  line-height: 60px;
}


.btn {
  margin: 50px auto;
  text-align: center;
}

.btn button {
  margin-right: 50px;
}
</style>
